<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<body>
	<ui:composition template="/template/template.xhtml">
		<ui:define name="body">										
			<h:form onkeypress="if (event.keyCode == 13) return false;">
								
				<rich:notifyMessages stayTime="5000" nonblocking="true" />
														              
				<a4j:commandLink id="createPane_btn" value="#{msg.create}"
					action="#{userMaintainBean.newItem}"
					styleClass="buttonClass" style="font-size: 16px;"
					execute="@this" render="@none"
					oncomplete="#{rich:component('createPane')}.show();" >
								
				</a4j:commandLink>											
				
				<h:outputText value="&#160;" />
				<h:outputText value="&#160;" />		
				<h:outputText value="&#160;" />						
								
				<a4j:commandLink
					id="searchPane_btn" value="#{msg.search}"
					styleClass="buttonClass" style="font-size: 16px;"					
					execute="@this" render="@none"
					oncomplete="#{rich:component('searchPane')}.show();">
					
					<rich:componentControl event="click" operation="show" target="searchPane">
		                <a4j:param name="event" value="event" noEscape="true" />
		                <rich:hashParam>
		                    <a4j:param noEscape="true" name="top"
		                        value="jQuery(#{rich:element('searchPane_btn')}.parentNode).offset().top" />
		                    <a4j:param noEscape="true" name="left" value="jQuery(#{rich:element('searchPane_btn')}.parentNode).offset().left" />
		                </rich:hashParam>
		            </rich:componentControl>
					
				</a4j:commandLink>			
				
				<rich:extendedDataTable id="dataTable" width="100%" rows="15" frozenColumns="3"
					value="#{userMaintainBean.userDetails}" var="userDetail" iterationStatusVar="it">
					
					<f:facet name="header">
		                <h:outputText value="#{msg.userdetail_maintain}" />
		            </f:facet>
					
					<rich:column width="33px">
						<f:facet name="header">
			                <h:outputText value="#{msg.index_logo}" />
			            </f:facet>						 
						<h:outputText value="#{it.index + 1}" />						
					</rich:column>
					
					<rich:column width="235px"
						sortBy="#{userDetail.username}"
						sortOrder="#{userMaintainBean.sortsOrders['user_username']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.username}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_username" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_username']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_username']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.username}" />
					</rich:column>
					
					<rich:column width="120px"
						sortBy="#{userDetail.lastname}"
						sortOrder="#{userMaintainBean.sortsOrders['user_lastname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.lastname}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_lastname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_lastname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_lastname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.lastname}" />
					</rich:column>			
					
					<rich:column width="200px"
						sortBy="#{userDetail.firstname}"
						sortOrder="#{userMaintainBean.sortsOrders['user_firstname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.firstname}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_firstname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_firstname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_firstname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.firstname}" />
					</rich:column>	
					
					<rich:column width="200px"
						sortBy="#{userDetail.nickname}"
						sortOrder="#{userMaintainBean.sortsOrders['user_nickname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.nickname}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_nickname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_nickname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_nickname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.nickname}" />
					</rich:column>			
					
					<rich:column width="200px"
						sortBy="#{userDetail.email}"
						sortOrder="#{userMaintainBean.sortsOrders['user_email']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.email}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_email" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_email']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_email']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.email}" />
					</rich:column>			
					
					<rich:column width="150px"
						sortBy="#{userDetail.phone}"
						sortOrder="#{userMaintainBean.sortsOrders['user_phone']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.phone}" render="@form"
									action="#{userMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="user_phone" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{userMaintainBean.sortsOrders['user_phone']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{userMaintainBean.sortsOrders['user_phone']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{userDetail.phone}" />
					</rich:column>							
					
					<rich:column width="60px">
						<f:facet name="header">
							<h:outputText value="#{msg.active}" style="color:#FFFFFF" styleClass="tableTitle" />								               
			            </f:facet>	
						<h:outputText value="#{userDetail.active}" />
					</rich:column>
									
					<rich:column width="50px">
						<f:facet name="header">
			                <h:outputText value="#{msg.edit}" />
			            </f:facet>	
		                <a4j:commandLink style="border:none;" execute="@this" render="@none"
							oncomplete="#{rich:component('deletePane')}.show()">		                    
		                    <h:graphicImage library="images" name="icons/delete.gif" alt="delete" />
		                    <a4j:param value="#{it.index}" assignTo="#{userMaintainBean.currentIndex}" />
		                </a4j:commandLink>		                
		                
		                <a4j:commandLink style="border:none;" render="editPane" execute="@this"
		                    oncomplete="#{rich:component('editPane')}.show()"
		                    action="#{userMaintainBean.valueChangeUserGroupIds}">		                    
		                    <h:graphicImage library="images" name="icons/edit.gif" alt="edit" />
		                    <a4j:param value="#{it.index}" assignTo="#{userMaintainBean.currentIndex}" />
		                    <f:setPropertyActionListener target="#{userMaintainBean.editedItem}" value="#{userDetail}" />			                                        		                  		                    		                  
		                </a4j:commandLink>
		                
		            </rich:column>
		            
		            <f:facet name="footer">
		                <rich:dataScroller page="#{userMaintainBean.page}" />
		            </f:facet>
					
				</rich:extendedDataTable>
				
				<a4j:jsFunction name="search" action="#{userMaintainBean.search}" 
					render="dataTable" execute="@this" />
				
				<a4j:jsFunction name="remove" action="#{userMaintainBean.remove}" 
					render="dataTable" execute="@this"
            		oncomplete="#{rich:component('deletePane')}.hide();" />
						
				<rich:popupPanel id="statPane" autosized="true">		
            		<h:graphicImage library="images" name="icons/ai.gif" alt="ai" />
            		<h:outputText value="#{msg.please_wait}" />
        		</rich:popupPanel>
        		
				<rich:popupPanel id="deletePane" autosized="true">
					<f:facet name="header">
            			<h:outputText value="#{msg.delete}" />
        			</f:facet>
					<h:outputText value="#{msg.delete_confirm_message}" styleClass="inputText" style="font-size: 16px;" />		            
		            <a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
		            	value="#{msg.cancel}" onclick="#{rich:component('deletePane')}.hide(); return false;" />
		            <a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            	value="#{msg.delete}" onclick="remove(); return false;" />
		        </rich:popupPanel>		
		        		
		        <rich:popupPanel header="#{msg.edit}" id="editPane"  width="450" height="530" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('editPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.username}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:outputText value="#{userMaintainBean.editedItem.username}" id="edit_user_username" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.password}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputSecret value="#{userMaintainBean.editedItem.password}" required="true" 
		                			requiredMessage="#{msg.password}-#{msg.required_field}" id="edit_user_password" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="edit_user_password" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.lastname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.lastname}" required="true" 
		                			requiredMessage="#{msg.lastname}-#{msg.required_field}" id="edit_user_lastnamee" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="edit_user_lastnamee" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.firstname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.firstname}" required="true" 
		                			requiredMessage="#{msg.firstname}-#{msg.required_field}" id="edit_user_firstname" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="edit_user_firstname" styleClass="message-icon"/></td>
						</tr>		
						
						<tr>
							<td><h:outputText value="#{msg.nickname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.nickname}" id="edit_user_nickname" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>										
						
						<tr>
							<td><h:outputText value="#{msg.email}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.email}" id="edit_user_email" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>

						<tr>
							<td><h:outputText value="#{msg.phone}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.phone}" id="edit_user_phone" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>

		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.active}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectOneMenu id="edit_user_active" styleClass="selectClass"		                			
									value="#{userMaintainBean.editedItem.active}" >	
									<f:selectItem itemLabel="#{msg.trueValue}" itemValue="#{true}" />
									<f:selectItem itemLabel="#{msg.falseValue}" itemValue="#{false}" />																				
								</h:selectOneMenu>		                			
		                	</td>    
		                	<td></td>
		                </tr>		 
		                
		                <tr>
		                	<td><h:outputText value="#{msg.usergroup_name}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectManyListbox id="edit_usergroups" styleClass="listClass" size="5" 
		                			value="#{userMaintainBean.selectedUserGroupIds}">
									<f:selectItems value="#{userMaintainBean.userGroupOptions}" />
								</h:selectManyListbox>		                			
		                	</td>    
		                	<td></td>
		                	
		                </tr>               		               
		                											
						<tr>
							<td colspan="2" align="right">
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
									value="#{msg.save}" action="#{userMaintainBean.update}" render="dataTable" execute="editPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
		            				value="#{msg.cancel}" onclick="#{rich:component('editPane')}.hide(); return false;" />
							</td>						
						</tr>
					</table>

		        </rich:popupPanel>
		        				
		        
		        <rich:popupPanel header="#{msg.create}" id="createPane"  width="450" height="500" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('createPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.username}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.username}" required="true" 
		                			requiredMessage="#{msg.username}-#{msg.required_field}" id="create_user_username" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="create_user_username" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.password}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputSecret value="#{userMaintainBean.editedItem.password}" required="true" 
		                			requiredMessage="#{msg.password}-#{msg.required_field}" id="create_user_password" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="create_user_password" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.lastname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.lastname}" required="true" 
		                			requiredMessage="#{msg.lastname}-#{msg.required_field}" id="create_user_lastnamee" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="create_user_lastnamee" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.firstname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.firstname}" required="true" 
		                			requiredMessage="#{msg.firstname}-#{msg.required_field}" id="create_user_firstname" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="create_user_firstname" styleClass="message-icon"/></td>
						</tr>		
						
						<tr>
							<td><h:outputText value="#{msg.nickname}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.nickname}" id="create_user_nickname" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>										
						
						<tr>
							<td><h:outputText value="#{msg.email}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.email}" id="create_user_email" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>

						<tr>
							<td><h:outputText value="#{msg.phone}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.editedItem.phone}" id="create_user_phone" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td></td>
						</tr>

		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.active}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectOneMenu id="create_user_active" styleClass="selectClass"		                			
									value="#{userMaintainBean.editedItem.active}" >	
									<f:selectItem itemLabel="#{msg.trueValue}" itemValue="#{true}" />
									<f:selectItem itemLabel="#{msg.falseValue}" itemValue="#{false}" />																				
								</h:selectOneMenu>		                			
		                	</td>    
		                	<td></td>
		                </tr>		 
		                
		                <tr>
		                	<td><h:outputText value="#{msg.usergroup_name}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectManyListbox id="create_usergroups" styleClass="listClass" size="5" 
		                			value="#{userMaintainBean.selectedUserGroupIds}">
									<f:selectItems value="#{userMaintainBean.userGroupOptions}" />
								</h:selectManyListbox>		                			
		                	</td>    
		                	<td></td>
		                	
		                </tr>               		               
		                											
						<tr>
							<td colspan="2" align="right">
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
									value="#{msg.create}" action="#{userMaintainBean.create}" render="dataTable" execute="createPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('createPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            				value="#{msg.cancel}" onclick="#{rich:component('createPane')}.hide(); return false;" />
							</td>	
							<td></td>					
						</tr>
					</table>

		        </rich:popupPanel>
		        
		        <rich:popupPanel header="#{msg.search}" id="searchPane"  width="600" height="150" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('searchPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.keyword}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{userMaintainBean.searchStr}" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    											
							<td>
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
									value="#{msg.search}" action="#{userMaintainBean.search}" render="dataTable" execute="searchPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('searchPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            				value="#{msg.cancel}" onclick="#{rich:component('searchPane')}.hide(); return false;" />
							</td>													
						</tr>
					</table>

		        </rich:popupPanel>
			
			</h:form>						
			    
		</ui:define>
	</ui:composition>
</body>
</html>
